import { useState } from "react"
import { ResultPage, Card, Button, Modal, Tabs, Image } from "antd-mobile"
import { useNavigate } from "react-router-dom"
import "./index.css"
import loginImg from "../../img/login.png"
import useToken from "../../hook/useToken"
function Index() {
  const navigate = useNavigate()
  // const token = localStorage.getItem("token")
  const [visible, setVisible] = useState(false)
  const token = useToken()
  console.log(token)
  // 点击按钮
  const handelLogin = () => {
    if (token) {
      navigate("/")
    } else {
      setVisible(true)
    }
  }
  return (
    <div>
      <ResultPage status="" title="点击按钮登录">
        <Card style={{ marginTop: 12 }}>
          <Button color="primary" block onClick={() => handelLogin()}>
            登录
          </Button>
        </Card>
      </ResultPage>
      <Modal
        showCloseButton
        visible={visible}
        content={
          <div className="login_modal">
            <h4>登录可享更多权益</h4>
            <Tabs>
              <Tabs.Tab title="APP登录" key="fruits">
                <Image
                  style={{ marginLeft: 60 }}
                  src={loginImg}
                  width={200}
                  height={250}
                  fit="fill"
                />
              </Tabs.Tab>
              <Tabs.Tab title="免密登录" key="vegetables">
                西红柿
              </Tabs.Tab>
              <Tabs.Tab title="密码登录" key="animals">
                蚂蚁
              </Tabs.Tab>
            </Tabs>
          </div>
        }
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  )
}

export default Index
